<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>会话分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>会话数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="user_behavior_sessions">-</span>个</h1>
                        <div class="stat-percent font-bold fa-lg">
                          <span id="user_behavior_sessions_rate" class="fa"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>总会话时长</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="user_behavior_sessions_length">-</span></h1>
                        <div class="stat-percent font-bold">
                          <span id="user_behavior_sessions_length_rate" class="fa"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>平均会话时长</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span id="user_behavior_avg_sessions_length">-</span></h1>
                        <div class="stat-percent font-bold">
                          <span id="user_behavior_avg_sessions_length_rate" class="fa"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div id="demo_title" class="col-sm-12 no-margins">
              <div class="row no-paddings no-margins no-border">
                <div class="col-sm-12 no-margins" style="padding:0px; border:0px;">
                  <div class="ibox no-margins">
                    <div class="ibox-content">
                        <span class="no-margins">选择时间：</span>
                        <button id="time_show_bt" type="button" class="btn btn-default no-margins no-borders no-paddings" style="padding-bottom: 0px">
                            <span id="date1"></span>
                            <span class="caret"></span>
                        </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="demo" class="col-sm-12"></div>
            <div id="demo2" class="col-sm-12"></div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

    <script type="text/javascript">
        var startDate = getStartDate();
        var endDate = getEndDate();

        function showSpeedRate(showId, value) {
            if (value) {
                if (value > 0) {
                    $(showId).html(value.toPercent() + "%");
                    $(showId).addClass("text-danger");
                    $(showId).addClass("fa-level-up");
                } else {
                    value = value * -1;
                    $(showId).html(value.toPercent() + "%");
                    $(showId).addClass("text-success")
                    $(showId).addClass("fa-level-down");
                }
            } else {
                $(showId).html("-");
                $(showId).addClass("text-info");
            }
        }

        function load1(sd, ed) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/user_behavior?metric=sessions_length,sessions&platform=website&group_by=day";
            url += "&start_date=" + sd + "&end_date=" + ed;
            $.get(url, {}, function(data) {
                cleanContent("demo");
                cleanContent("demo2");
                cleanContent("demo3");

                if (data.code == '200') {
                    if (data.data.length == 0) {
                       showNoConnent("demo");
                       return;
                    }
                    var chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'demo2', // 在那个标签上显示，指定id即可
                            type : "line" // 类型
                        },
                        title : {
                            text: "会话时长分析图"
                        },
                        xAxis : {
                            title : {
                                text : "日期"
                            }
                        },
                        yAxis : [{
                            title : {
                                text : "时长(小时)"
                            }
                        },{
                        	id: "length_yaxis",
                        	title: {
                        		text: "时长(秒)"
                        	},
                        	opposite: true
                        }],
                        series : []
                    });

                    var chart2 = new Highcharts.Chart({
                        chart : {
                            renderTo : 'demo', // 在那个标签上显示，指定id即可
                            type : "line" // 类型
                        },
                        title: {
                            text: '会话个数与会话长度关系分析图'
                        },
                        xAxis : {
                            title : {
                                text : "日期"
                            }
                        },
                        yAxis : [{
                            title : {
                                text : "个数"
                            }
                        },{
                        	id: "length_yaxis",
                        	title: {
                        		text: "时长(秒)"
                        	},
                        	opposite: true
                        }],
                        series : []
                    });
                    var categories = [];
                    var sessionsLengthSeries = {
                        name: "总会话长度",
                        data:[]
                    };
                    var avgSessionsLengthSeries= {
                        name: "平均会话长度",
                        data: [],
                        yAxis: "length_yaxis"
                    };

                    var sessionsLengthSeries2 = {
                        name: "会话长度",
                        data:[],
                        yAxis: "length_yaxis"
                    };
                    var sessionsSeries = {
                        name: "会话个数",
                        data:[]
                    };
                    $.each(data.data, function(i, item) {
                        categories.push(item["day"]);
                        var ss = item["$sessions"];
                        var sl = item["$sessions_length"];
                        sessionsSeries["data"].push(ss);
                        sessionsLengthSeries2["data"].push(sl);
                        sessionsLengthSeries["data"].push(sl);
                        if (ss) {
                            avgSessionsLengthSeries["data"].push(Number((sl / ss).toFixed(2)));
                        } else {
                            avgSessionsLengthSeries["data"].push(0);
                        }
                    });

                    chart.addSeries(sessionsLengthSeries);
                    chart.addSeries(avgSessionsLengthSeries);
                    chart.xAxis[0].setCategories(categories);

                    chart2.addSeries(sessionsSeries);
                    chart2.addSeries(sessionsLengthSeries2);
                    chart2.xAxis[0].setCategories(categories);
                    return true;
                } else {
                    showNoConnent("demo", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
                }
                return false;
            }, "json");
        }

        $(document).ready(function(){
            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            var url = COMMON_PREFIX_URL + "/stats/summary/user_behavior?metric=sessions_length,sessions&platform=website";
            url += "&start_date=" + sd;
            url += "&end_date=" + ed;
            $.get(url, {}, function(data){
                if (data.code == '200' && data.data.length > 0) {
                    var usersData = data.data[0];
                    var sessions = usersData["$sessions"];
                    var sessionsLength = usersData["$sessions_length"];
                    if (typeof(sessions) != "undefined" && typeof(sessionsLength) != "undefined") {
                        $("#user_behavior_sessions").html(sessions.formatThousands());
                        $("#user_behavior_sessions_length").html(formatSecs(sessionsLength));
                        $("#user_behavior_avg_sessions_length").html((sessionsLength / sessions).toFixed(2) + "秒");

                        sd = date2YmdStr(getSpecialDate(new Date(), -2));
                        ed = sd;
                        url = COMMON_PREFIX_URL + "/stats/summary/user_behavior?metric=sessions_length,sessions&platform=website";
                        url += "&start_date=" + sd;
                        url += "&end_date=" + ed;
                        $.get(url, {}, function(data2){
                        	if (data2.code == '200' && data2.data.length > 0) {
                        		var oldUsersData = data2.data[0];
                        		var oldSessions = oldUsersData["$sessions"];
                        		var oldSessionsLength = oldUsersData["$sessions_length"];
                        		if (typeof(oldSessions) != "undefined" && typeof(oldSessionsLength) != "undefined") {
                            		showSpeedRate("#user_behavior_sessions_rate", Number(((sessions - oldSessions) / oldSessions).toFixed(4)));
                            		showSpeedRate("#user_behavior_sessions_length_rate", Number(((sessionsLength - oldSessionsLength) / oldSessionsLength).toFixed(4)));
                        	    	showSpeedRate("#user_behavior_avg_sessions_length_rate", Number(((sessionsLength / sessions - oldSessionsLength / oldSessions) / oldSessionsLength * oldSessions).toFixed(4)));
                        		}
                        	}
                        });
                    }
                } else {
                    // 
                }
            }, "json");

            load1(startDate, endDate);

            // 显示时间控件
            new AE_Date('date1','time_show_bt',function(startDate, endDate){
                load1(startDate, endDate);
            }, startDate, endDate);
        });
        
    </script>
</body>
</html>